{% extends "queues/base_queues.html" %}

{% block head_title %}Queue form{% endblock %}
{% block page_title %}Queue form{% endblock page_title %}

{% block content %}
    <div class="panel-body">
        <form action="" method="post">
            {% csrf_token %}
            <table class="table table-bordered">
                <tr>
                    <th><label for="id_name">Name:</label><span class="alert-error">{{ form.name.errors }}</span></th>
                    <td>{{ form.name }}</td>
                </tr>
                <tr>
                    <th><label for="id_is_public">Is public:</label><span class="alert-error">{{ form.is_public.errors }}</span></th>
                    <td>{{ form.is_public }}</td>
                </tr>
                <tr>
                    <th><label for="id_organizers">Organizers:</label></th>
                    <td><select multiple="multiple" id="id_organizers" name="organizers">
                        {% for user in object.organizers.all %}
                            <option value="{{ user.pk }}" selected>{{ user }}</option>
                        {% endfor %}
                    </select><br/><span class="helptext">(Organizers allowed to view this queue when they assign their competition to a queue) </span>
                    </td>
                </tr>
            </table>

            <input type="submit" value="Save" class="btn btn-primary" style="float: right;">
        </form>
    </div>

    <style>
        .select2-container {
            width: 100%;
        }
    </style>

    <script type="text/javascript">
        $('document').ready(function () {
            $("#id_organizers").select2({
                width: "100%",
                dropdownAutoWidth: true,
                ajax: {
                    url: '/user_lookup/',
                    delay: 250
                },
                cache: true,
                minimumInputLength: 1
            });
        })
    </script>
{% endblock %}